<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>组件通信-子传父（自定义事件）</title>
</head>
<body>
<div id="app">
  <!--2、使用v-on监听自定义事件（自定义的事件默认参数是创建自定义参数时传入的数据值）-->
  <cpn @item-click="cpnClick"></cpn>
</div>

<template id="cpn">
  <div>
    <ul>
      <li v-for="category in categorys" @click="cateClick(category)">{{category.name}}</li>
    </ul>
  </div>
</template>
<script src="../js/vue.js"></script>
<script>

  const cpn = {
    template: '#cpn',
    data() {
      return {
        categorys: [{id: 1, name: '热门推荐'},
          {id: 2, name: '家用电器'},
          {id: 3, name: '手机数码'},
          {id: 4, name: '电脑办公'}]
      }
    },
    methods: {
      cateClick(category) {
        // 1、发射自定义事件,第一个是自定义事件名，第二个是传给父组件的数据，也可以不带数据
        this.$emit('item-click',category);
      }
    }
  }


  const app = new Vue({
    el: '#app',
    data: {
      message: 'Hello Vue'
    },
    components: {
      cpn
    },
    methods: {
      // 3、自定义事件触发方法，参数就是子组件传出来的值
      cpnClick(item){
        console.log('cpnClick',item);
      }
    }
  });
</script>
</body>
</html>
